<template>
  <div class="ap"> 
  <!-- <h2>欢迎登录</h2>
 <mt-field label="手机号" placeholder="请输入手机号" v-model="phone"></mt-field>
<mt-field label="密码" placeholder="请输入密码" type="password" v-model="password"></mt-field>
 
  <mt-button size="large" type="primary" @click="login()">登录</mt-button>
   <mt-button size="large" type="danger" @click="register()"> 去注册</mt-button> -->
  
  <van-divider  :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">欢迎登录</van-divider>
<van-form @submit="onSubmit">
  <van-field
    v-model="phone"
    name="手机号"
    label="手机号"
    placeholder="手机号"
    :rules="[{ required: true, message: '请填写手机号'},
    {pattern:/^1[3456789]\d{9}$/  ,message: '手机号格式有误'}]"
  />
  <van-field
    v-model="password"
    type="password"
    name="密码"
    label="密码"
    placeholder="密码"
    :rules="[{ required: true, message: '请填写密码' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="submit">登录</van-button>
    <van-button round block type="info" @click.stop="register()" class="register">去注册</van-button>
     <van-button round block type="info" @click.stop="code()" class="code">验证码登录</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { Toast } from 'mint-ui';
export default {
  name: 'logins',
  data () {
    return {
     phone:"",
     password:""
    }
  },
  methods:{
    //验证码登录
    code(){
       this.$router.push("/Code")
    },
    // 去注册
 register(){
   this.$router.push("/register")
 },
//  登录
 onSubmit(){
     var str =`phone=${this.phone}&password=${this.password}`;
        this.axios.post("https://bufferc.store:8443/user/loginByPassword",str)
        .then(res=>{
              console.log(res);
              if(res.data.code==200){
                  Toast(res.data.message);
                //1、 登录成功要保存用户信息到vuex
                this.$store.commit("saveInfo",res.data.data);
                // 2、返回token(用户的唯一标识符)，并将token保存到sessionStorage中
                 sessionStorage.setItem("token",res.data.data.token);
                 //3、 跳转到首页
                 this.$router.push("/")

              }else{
                 Toast(res.data.message);
              }
        })
 }
   
  },
  mounted(){
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.register{
  margin-top: 3%;
}
.code{
   margin-top: 3%;
}

</style>